// 主题颜色
@primary-foreground-color: #fff;
// 控件背景的默认颜色
@primary-background-color: #2B333F;

// 基本字体大小控制所有内容的大小，而不仅仅是文本。
// 所有的尺寸都使用基于em的大小，这样就可以根据字体大小调整比例。
.videoPlayer {
  font-size: 24px;
  color: @primary-foreground-color;
}




// 修改videojs样式
:global {

  .video-js {
    &.vjs-fluid {
      width: 100%;
      height: 100%;
      padding-top: 0px;
    }

    // “大播放按钮”是在视频播放之前显示的播放按钮。
    .vjs-big-play-button {
      display: none;
      font-size: 3em;
      line-height: 1.8em;
      height: 1.8em;
      width: 1.8em;
      border-radius: 1.8em;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    /* 加载圆圈 */
    .vjs-loading-spinner {
      font-size: 2.5em;
      width: 2em;
      height: 2em;
      border-radius: 1em;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: auto;
      transform: translate(-50%, -50%);
    }
  }

  // .vjs-tech{
  //   opacity: 0;
  //   z-index: -1;
  // }

  .vjs-poster {
    background-size: cover;
    // background-size: cover;
    transform: translateZ(10px);
    display: block !important;
    transition: all 0.2s;
    height: 100%;
    // height: calc(100vh - 110px);
  }


  .myCanvas {
    width: 100%;
    height: 100%;
  }


  @keyframes huxi {
    0% {
      opacity: 0.3;
    }

    100% {
      opacity: 1;
    }
  }


  .ownPlayBtn {
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 100px);
    transition: all 0.5s;
    background: rgba(0, 0, 0, 0.6);

    img :local {
      width: 60px;
      height: 60px;
      position: absolute;
      left: 50%;
      top: 50%;
      top: calc(50vh - 55px);
      transform: translate3d(-50%, -50%);
      filter: drop-shadow(4px 6px 6px rgba(66, 66, 66, 0.6));
      animation: huxi 1s infinite alternate ease-in-out;
    }
  }

  .showOwnPlayBtn {
    visibility: visible;
    opacity: 1;
  }

  .hiddenOwnPlayBtn {
    visibility: hidden;
    opacity: 0;
  }
}
